<template>
	<el-dialog
    title="新增权限"
    :visible.sync="showaddnew"
    width="30%"
    :before-close="handleClose">
    <el-form :model="permissionInfo" :rules="rules" ref="permissionInfo">
        <table>
            <tr>
                <td class="title">权限名称:</td>
                <td class="content">
                    <el-form-item prop="permissionName">
                        <el-input v-model="permissionInfo.permissionName"></el-input>
                    </el-form-item>
                </td>
            </tr>
            <tr>
                <td class="title">父级权限:</td>
                <td class="content">
                    
                    	{{parentDesc}}
                    
                </td>
            </tr>
            <tr>
                <td class="title">权限描述:</td>
                <td class="content">
                    <el-form-item prop="permissionDesc">
                        <el-input v-model="permissionInfo.permissionDesc"></el-input>
                    </el-form-item>
                </td>
            </tr>
            <tr>
                <td class="title">排列序号:</td>
                <td class="content">
                    <el-form-item prop="sortNum">
                    <el-input v-model="permissionInfo.sortNum"></el-input>
                    </el-form-item>
                </td>
            </tr>
            <tr>
                <td class="title">权限等级:</td>
                <td class="content">
                    <!-- <el-input v-model="permissionInfo.permissionLeve"></el-input>    -->
                 <el-select v-model="permissionInfo.permissionLeve" placeholder="请选择">
                    <el-option
                    v-for="item in 5"
                    :key="item"
                    :label="item"
                    :value="item">
                    </el-option>
                </el-select>
                </td>
            </tr>
        </table>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="addnewone">确 定</el-button>
    </span>
    </el-dialog>
</template>

<script>
	export default{
		props:["showaddnew","parentid","parentDesc"],
		data(){
			// 自定义的验证规则
	        var checkNum = (rule,value,callBack)=>{
	            var re = /[^0-9]/ig;
	            //如果为true则表示输入的内容中有非数字,则直接提示错误
	            if(re.test(value)){
	                 return callBack(new Error('请输入正确数字'));
	            }
	            callBack();
	        }
	        return {
	            permissionInfo: {},
	            rules: {
	                permissionName: [
	                    {required: true,message:'请输入权限名称',trigger:'blur'},
	                    {min:2,message:'名称最少两个字符',trigger:'blur'}
	                ],
	                permissionDesc: [
	                    {required: true,message: '请输入权限描述',trigger:'blur'},
	                    {min:4,message:'描述不能少于4个字',trigger:'blur'}
	                ],
	                sortNum: [
	                    {required:true,message:'请输入排序号',trigger:'blur'},
	                    {validator:checkNum,trigger:'blur'}]
				}
			}
		},
			methods: {
				handleClose(){
					this.$parent.showaddnew = false;
				},
				addnewone(){
					this.$refs["permissionInfo"].validate((valid)=>{
						if(valid){
							this.permissionInfo.parentid=this.parentid;
							this.$http.post(this.$apis.addNewPermission,this.permissionInfo)
							.then((resp)=>{
								console.log("成功");
								this.$parent.showaddnew = false;
								this.$store.dispatch("loadAllPermission");
							})
						}else{
							return false;
						}
					})
				}
			}

	}
</script>

<style lang="scss" scoped>
	tr {
		
		height: 62px;
		line-height: 40px;
        padding: 5px;
    }
    .title {
        width: 30%;
    }
    .content {
        width: 70%;
		
    }
</style>